/*
* 选择题组件
* */
import {Image, Checkbox, Radio} from 'antd';
import {useEffect, useState} from "react";

const defaultcanshu = {
    complex: false,         //是不是多选，默认是单选
}

function xuanzeti(props) {
    let canshu
    if (props.kwarge) {
        canshu = {...defaultcanshu, ...props.kwarge}
    } else {
        canshu = {...defaultcanshu}
    }
    // 初始化两个参数，一个保存单选答案，一个保存多选答案
    const [danxuan, setdanxuan] = useState("")
    const [duoxuan, setduoxuan] = useState([])
    // 多选回调
    const duoxuanfunc = (value) => {
        let index = duoxuan.indexOf(value)
        if (index !== -1) {
            duoxuan.splice(index, 1)
        } else {
            duoxuan.push(value)
        }
        const jieguo = [...duoxuan]
        setduoxuan(jieguo)
        props.duoxianchange(props.neirong,jieguo)
    }
    // 单选回调
    const danxuanfunc = (value) => {
        setdanxuan(value)
        props.danxuanchange(props.neirong,value)
    }

    // 初始化区域,如果内容里面有回答的答案，就赋值上
    useEffect(() => {
        if (canshu.complex) {
            setduoxuan(props.duoxuan || [])
        } else {
            setdanxuan(props.danxuan || "")
        }
        return () => {
            setdanxuan("")
            setduoxuan([])
        }
    }, [])
    return (
        <div className="w-full my-10px flex flex-col ">
            {/*上面是题干，包括文字描述和图片组*/}
            <div className="w-full">
                <div className="w-full">
                    <span className="font-semibold">{props.neirong.index}. </span>{props.neirong.text}
                </div>
                <div className="w-full flex justify-start items-start flex-warp">
                    {props.neirong.imglist ? props.neirong.imglist.map(item => {
                        return (
                            <div className="w-1/10 juzhong flex-col" key={item.toString()}>
                                <Image src={item.url} className="w-full object-contain object-center"/>
                                <span>{item.text}</span>
                            </div>
                        )
                    }) : null}
                </div>
            </div>
            {/*标准答案*/}
            {props.value ?
                <div className="w-full my-1 text-left">答案是：<span className="text-red-500">{props.value}</span>
                </div> : null}
            {/*下面的可选项*/}
            <div className="w-full ml-30px">
                {canshu.complex ?
                    <Checkbox.Group value={duoxuan} disabled={props.disabled || false}>
                        {props.neirong.options.map((item, index) => {
                            return (<Checkbox value={item.index} onChange={() => {
                                duoxuanfunc(item.index)
                            }} key={"Checkbox" + index}>
                                <span>{item.index} </span>.
                                {item.text ? item.text : null}
                                {item.img ?
                                    <Image src={item.img} className="w-50px object-contain object-center"/> : null}
                            </Checkbox>)
                        })}
                    </Checkbox.Group>
                    :
                    <Radio.Group value={danxuan} disabled={props.disabled || false}>
                        {props.neirong.options.map((item, index) => {
                            return (<Radio value={item.index} onChange={() => {
                                danxuanfunc(item.index)
                            }} key={"Radio" + index}>
                                <span>{item.index} </span>.
                                {item.text ? item.text : null}
                                {item.img ?
                                    <Image src={item.img} className="w-50px object-contain object-center"/> : null}
                            </Radio>)
                        })}
                    </Radio.Group>
                }
            </div>
        </div>
    )
}

export default xuanzeti